<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="" />
        <link href="favicon.ico" rel="shortcut icon" />
        <title>Google Maps jQuery Plugin - Customization</title>
        <meta name="robots" content="index,follow">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- The Needs -->

        <!-- ! The Plugin Stylesheet, needed -->
        <link rel="stylesheet" type="text/css" href="./css/jquery.googlemaps.customize.css" title="style" />

        <!-- ! Google Maps API v3, needed -->
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

        <!-- ! Addition Infobox Script from Google, use THIS modificated Version, needed -->
        <script type="text/javascript" src="./js/infobox.js"></script>

        <!-- ! jQuery latest, here: 1.9.1., needed -->
        <script type="text/javascript" src="./js/jquery.min.js"></script>

        <!-- ! The Plugin Script Base, needed -->
        <script type="text/javascript" src="./js/jquery.googlemaps.js"></script>

        <!-- ! Example Map Data, replace it, but: needed anyway -->
        <script type="text/javascript" src="./mapdata-customize.js"></script>

        <!-- End Needs -->

        <!-- Example Page Java Script, not needed -->
        <script type="text/javascript" src="./js/assets/page.js"></script>

        <!-- Additional Stylesheets, not needed -->
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,300" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/bootstrap.min.css" title="style" />
        <link rel="stylesheet" type="text/css" href="./css/assets/font-awesome.min.css" title="style" />
        <!-- end Additional Stylesheets -->

        <!-- ! Example CSS Stuff, not needed -->
        <link rel="stylesheet" type="text/css" href="./css/assets/page.css" title="style" />

    </head>
    <body class="customize tripple">
        <div class="page">
            <div class="left">
                <div class="heading">
                    <h1>Hover und Klick öffnet verschiedenen Infoboxen, Klick-Content via XHR</h1>
                    <h2>Google Maps jQuery Plugin</h2>
                </div>
                <div id="mapbox" class="mapbox">

                </div>
            </div>
            <div class="middle">
                <div class="heading">
                    <h1>Marker-Liste</h1>
                    <h2>hover 200ms delay</h2>
                </div>
                <div class="marker-list">

                </div>
            </div>
            <div class="right">
                <div class="heading">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-xs btn-disabled" disabled="disabled">
                            Show Seed:
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowOptions fat">
                            Merged Options
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowParams fat">
                            Init Parameters
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowDefaultOptions fat">
                            Plugin Defaults
                        </button>
                    </div>
                </div>
                <textarea class="" id="options" wrap="off">
                    
               </textarea>
                <div class="code-controls">

                    <div class="btn-group fltr">
                        <button type="button" class="btn btn-default btn-xs btn-disabled" disabled="disabled">
                            Actions:
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonInit">
                            init()
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonShowAllInfoBoxes">
                            showAllInfoBoxes()
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonHideAllInfoBoxes">
                            hideAllInfoBoxes()
                        </button>
                        <button type="button" class="btn btn-primary btn-xs buttonDestroy">
                            destroy()
                        </button>
                    </div>
                    <button type="button" class="btn btn-success btn buttonInit fat">
                        Init with this options
                    </button>
                </div>
            </div>
        </div>
    </body>

    <script>
        var places = [{
            name : "Thulestraße 19, 13189 Pankow  ",
            coordinates : {
                lat : 52.5552900,
                lng : 13.4178100
            },
            
            info_box : {
                click : {
                    xhr_method  : 'post',
                    xhr_src     : 'ajax.html',
                    xhr_options : {
                        action  : "getmapinfobox",
                        id      : 99,
                    }
                },
                hover : { }
            },
        }, {
            name : "Pegasuseck 18, 12524 Treptow-Köpenick",
            coordinates : {
                lat : 52.4064000,
                lng : 13.5306300
            },
            info_box : {
                click : {
                    name : "Pegasuseck 18, 12524 Treptow-Köpenick",
                    link:[
                       {
                          title:"Main",
                          text:"Main",
                          src:""
                       }
                    ],
                    text:"Du hast geklickt. Wunderbar."
                },
                hover : {
                    name : "Pegasuseck 18, 12524 Treptow-Köpenick",
                    link:[
                       {
                          title:"Short",
                          text:"Short",
                          src:""
                       }
                    ],
                    text:"Das ist die Hover-Infobox. Klicke, um die zweite Infobox anzuzeigen."
                }
            },
            "marker_icon" : "marker_nobrokerage.png"
        }, {
            name : "Selgenauer Weg 2, 12355 Bezirk Neukölln  ",
            coordinates : {
                lat : 52.4199902,
                lng : 13.5030869
            },
            info_box : {

            },
            "marker_icon" : "marker_nobrokerage.png"
        }, {
            name : "Troppauer Straße 19A, 12205 Steglitz-Zehlendorf  ",
            coordinates : {
                lat : 52.4381647,
                lng : 13.2861199
            },
            info_box : {

            },
            "marker_icon" : "marker_nobrokerage.png"
        }, {
            name : "13357",
            coordinates : {
                lat : 52.5499561,
                lng : 13.3804407
            },
            info_box : {
                click : {
                    name : "13357",
                    text : "Irgendeine Postleitzahl.<br />Ganz schön langweilig"
                },
                hover : {
                   name : "13357",
                },
            },
            "marker_icon" : "marker_nobrokerage.png"
        }];

        var mapbox;

        $(window).on('ready', function() {

            mapbox = $('#mapbox').googleMapsTools({
                "data" : {
                    "settings" : {
                        "startPoint" : {
                            lat : "52.52",
                            lng : "13.4"
                        },
                        "startZoom" : 11,
                        "maxZoom" : 15,
                        "minZoom" : 11
                    },
                    "places" : places
                },
                "imagePath" : "images/marker-customize/",
                "centerOpenInfoboxOnWindowResize" : true,
                "mapStyles" : [{
                    "featureType" : "water",
                    "elementType" : "geometry",
                    "stylers" : [{
                        "lightness" : -52
                    }, {
                        "hue" : "#00ccff"
                    }]
                }, {
                    "featureType" : "landscape.man_made",
                    "elementType" : "geometry",
                    "stylers" : [{
                        "lightness" : -77
                    }]
                }, {
                    "featureType" : "poi",
                    "elementType" : "geometry.fill",
                    "stylers" : [{
                        "hue" : "#00ff19"
                    }, {
                        "saturation" : 75
                    }, {
                        "lightness" : -13
                    }, {
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "poi.park",
                    "stylers" : [{
                        "visibility" : "on"
                    }, {
                        "lightness" : -53
                    }, {
                        "hue" : "#00ff88"
                    }]
                }, {
                    "elementType" : "labels.text.fill",
                    "stylers" : [{
                        "visibility" : "on"
                    }, {
                        "color" : "#ffffff"
                    }]
                }, {
                    "elementType" : "labels.text.stroke",
                    "stylers" : [{
                        "visibility" : "on"
                    }, {
                        "color" : "#808080"
                    }, {
                        "weight" : 3.9
                    }, {
                        "lightness" : -61
                    }]
                }, {
                    "featureType" : "road",
                    "elementType" : "geometry.fill",
                    "stylers" : [{
                        "visibility" : "off"
                    }]
                }, {
                    "featureType" : "road",
                    "elementType" : "geometry.stroke",
                    "stylers" : [{
                        "weight" : 0.1
                    }, {
                        "lightness" : 1
                    }]
                }, {
                    "featureType" : "transit.line",
                    "elementType" : "geometry.stroke",
                    "stylers" : [{
                        "color" : "#e73a0d"
                    }, {
                        "weight" : 7
                    }]
                }, {
                    "featureType" : "transit.line",
                    "elementType" : "geometry.fill",
                    "stylers" : [{
                        "color" : "#ce431a"
                    }, {
                        "weight" : 3
                    }]
                }, { }],
                disableCustomControls : false,
                disableDefaultUI : true,
                streetViewControl : true,
                mapTypeControl : true,
                infoBox : {
                    click               : 'click',
                    hover               : 'hover',
                    openOn              : "hover", // fallback, if no different click and hover content is defined
                    closeOnClickOutside : false,
                    centerMapOnShow     : false,
                    boxClickClass       : 'infobox selected',
                    boxHoverClass       : 'infobox active'
                }
            });

            $('.buttonShowOptions').on('click', function() {
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getOptions(), null, 4)).html().replace(/\\"/gi, '"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });

            $('.buttonShowDefaultOptions').on('click', function() {
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getDefaults(), null, 4)).html().replace(/\\"/gi, '"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });

            $('.buttonShowParams').on('click', function() {
                $('#options').html($('<div/>').text(JSON.stringify(mapbox.getParams(), null, 4)).html().replace(/\\"/gi, '"'));
                $('.btn-group .btn-info').removeClass('btn-info').addClass('btn-primary');
                $(this).removeClass('btn-primary').addClass('btn-info');
            });

            $('.buttonShowOptions').trigger('click');

            /**
             *
             */
            var markers = mapbox.getMarkers();
            $(markers).each(function(i, e) {
                $('.marker-list').append('<div class="marker" data-marker-index="' + i + '" data-marker-id="' + $(e)[0].__gm_id + '"><a href="javascript:;">' + $(e)[0].title + '</a></div>');
            });

            $('.marker-list .marker').each(function(i, e) {
                $(e).on('mouseenter', function() {
                    var index = $(e).data('marker-index');
                    
                    var delay = setTimeout(function() {// delaying hover time
                        if ($(e).is(':hover')) {
                            mapbox.openMarker( $(e).data('marker-index'), 'mouseover' );
                        }
                    }, 200);
                });
                
                $(e).on('click', function() {
                    mapbox.openMarker( $(e).data('marker-index'), 'click',true );
                    
                });
            });
        });

    </script>
</html>